import React, { Component } from 'react'

import '../../static/css/han.form.css'

export default class Layer extends Component {
   state={
        value:''
   }
   
   shouldComponentUpdate(nexProps){
        
        if(this.state.value !== nexProps.defaultValue)
        {
            this.setState({value:nexProps.defaultValue})
        }
        return true
   }

    render() {
       let {value} = this.state;
       
        const {layerShow,onCancel,options,onOk,defaultValue} = this.props
        return (
            layerShow?<div className="han_layer">

                <div className="ctx">

                    <div className="top_bar">
                        <strong className="cancel" onClick={()=>{
                            //重置选项为初始传入的选项
                            this.setState({value:defaultValue})
                            // 调取函数（关闭弹层）
                            onCancel()
                        }}>取消</strong>
                        <strong className="ok"  onClick={ ()=>onOk(value)}>确定</strong>
                    </div>

                    <div className="bottom_content">
                        {
                            Object.keys(options).map(item=>{
                                return <div onClick={()=>this.setState({value:item})} key={item} className={["han_option",value===item?'active':''].join(' ')}>{options[item]}</div>
                            })
                        }
                    </div> 
                </div>
            </div>:null
        )
    }
}
